<template>
  <div class="city_list">
    <div class="title">当前城市</div>
    <div class="city_span">
      <span class="iconfont icon-dingwei"></span>{{title}}
    </div>
    <div class="title">已开通城市</div>
    <ul class="city_ul clearfix">
      <li v-for="(item, index) in list" :key="index" :id="item.store_id" @click="qie(item.name,item.phone,item.id)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'city_list',
  data () {
    return {
      list: [],
      title: sessionStorage.getItem('Dcity')
    }
  },
  mounted () {
    this.index()
  },
  methods: {
    ...mapMutations(['changeDcity']),
    ...mapMutations(['changephone']),
    ...mapMutations(['changeDcityId']),
    index () {
      this.$axios.get(process.env.API_HOST + '/api/common/city_list')
        .then(this.indexSee)
        .catch(error => console.log(error))
    },
    indexSee (res) {
      if (res.data.code === 1) {
        this.list = res.data.data
      }
    },
    qie (name, phone, id) {
      let that = this
      this.$dialog.confirm({
        title: '您确定将城市切换至' + name
      }).then(() => {
        that.changeDcity({ Dcity: name })
        that.changephone({ phone: phone })
        that.changeDcityId({ id: id })
        setTimeout(function () {
          that.$router.push('/')
        }, 500)
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.city_list
  padding 0 .4rem /* 20/50 */
  .title
    font-size .4rem /* 20/50 */
    font-weight bold
    height 1.4rem /* 70/50 */
    line-height 1.4rem /* 70/50 */
  .city_span
    font-size .3rem /* 15/50 */
    span
      margin-right .18rem /* 9/50 */
      background linear-gradient(90deg, #F14510, #EE340F)
      -webkit-background-clip text
      -webkit-text-fill-color transparent
      text-shadow 1px 1px 2px 0px rgba(255, 1, 1, 0.26)
  .city_ul
    li
      width 2rem /* 100/50 */
      height .8rem /* 40/50 */
      line-height .8rem /* 40/50 */
      background-color #F4F4F4
      color #333
      font-size .3rem /* 15/50 */
      border-radius .1rem /* 5/50 */
      margin-right .32rem /* 16/50 */
      float left
      text-align center
      margin-bottom .3rem /* 15/50 */
</style>
